<template>
  <div class="mianlay" id="mianlay">
    <!--待删 <a-layout>
      <a-layout-header>
        <img alt="logo" class="logo" src="@/assets/img/logo.png" />
        <h2>崇明教育 单点登录认证系统</h2>
      </a-layout-header>
      <a-layout-content>
        <el-row :gutter="20" style="height: calc(100vh - 134px); overflow: hidden">
          <el-col :span="16">
            <div class="loginImg"><img src="@/assets/img/loginImg.png" /></div>
          </el-col>
          <el-col :span="8">
            <div class="formcenter">
              <a-form @submit="onSubmit" :form="form">
                <a-tabs size="large" :tabBarStyle="{ textAlign: 'center' }" class="login-main-wh">
                  <a-tab-pane tab="账户密码登录" key="1">
                    <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px" />
                    <a-form-item>
                      <a-input
                      autocomplete="autocomplete"
                      size="large"
                      allowClear
                      placeholder="身份证号/手机号"
                      v-decorator="[
                          'name',
                          {
                            rules: [
                              {
                                required: true,
                                message: '身份证号/手机号',
                                whitespace: true,
                              },
                            ],
                          },
                        ]">
                        <a-icon slot="prefix" type="user" />
                      </a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-input-password
                      size="large"
                      placeholder="请输入密码"
                      autocomplete="autocomplete"
                      type="password"
                      v-decorator="[
                          'password',
                          {
                            rules: [
                              {
                                required: true,
                                message: '请输入密码',
                                whitespace: true,
                              },
                            ],
                          },
                        ]">
                        <a-icon slot="prefix" type="lock" />
                      </a-input-password>
                    </a-form-item>
                    <a-form-item>
                      <div style="display: flex">
                        <a-input
                        autocomplete="autocomplete"
                        allowClear
                        size="large"
                        placeholder="请输入验证码"
                        v-decorator="[
                            'captcha',
                            {
                              rules: [
                                {
                                  required: true,
                                  message: '请输入验证码',
                                  whitespace: true,
                                },
                              ],
                            },
                          ]">
                        </a-input>
                        <img style="cursor: pointer" @click="init()" :src="imgNumber" />
                      </div>
                    </a-form-item>
                  </a-tab-pane>
                  <a-tab-pane tab="手机号登录" key="2" v-if="false">
                    <a-form-item>
                      <a-input size="large" allowClear placeholder="请输入手机号码">
                        <a-icon slot="prefix" type="mobile" />
                      </a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-row :gutter="8" style="margin: 0 -4px">
                        <a-col :span="16">
                          <a-input size="large" allowClear placeholder="请输入验证码">
                            <a-icon slot="prefix" type="mail" />
                          </a-input>
                        </a-col>
                        <a-col :span="8" style="padding-left: 4px">
                          <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
                        </a-col>
                      </a-row>
                    </a-form-item>
                  </a-tab-pane>
                </a-tabs>
                <div class="login-main-wh">
                  <a-checkbox v-model="autoLogin">记住密码</a-checkbox>
                  <a style="float: right" @click="forgetPsw">忘记密码</a>
                </div>
                <a-form-item class="login-main-wh">
                  <a-button :loading="logging" style="width: 100%; margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
                </a-form-item>
                <div class="login-main-wh">
                  其他登录方式
                  <a v-for="(item, index) in imgIcon" :key="index" style="padding-left: 15px">
                    <img class="icon" :title="item.providerName" :src="`img/${item.icon}`" @click="skipThirdLogin(index)" />
                  </a>
                  <router-link style="float: right" to="/home" v-show="false">注册账户</router-link>
                </div>
              </a-form>
            </div>
          </el-col>
        </el-row>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <span>
          Copyright 上海市崇明区教育局 2023
          <a @click="goUrl">https://home.cmjy.sh.cn</a>
        </span>
      </a-layout-footer>
    </a-layout> -->
    <el-container>
      <!-- 顶部内容 -->
      <!-- <el-header class="login-top">
        <img alt="logo" src="@/assets/img/logo.png" />
        <h2>崇明教育单点登录认证系统</h2>
      </el-header> -->
      <!-- 主要内容 -->
      <el-main>
        <div class="formcenter">
          <a-form @submit="onSubmit" :form="form">
            <a-tabs size="large" :tabBarStyle="{ textAlign: 'center' }" class="login-main-wh">
              <a-tab-pane tab="账户密码登录" key="1">
                <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px" />
                <a-form-item>
                  <a-input
                  autocomplete="autocomplete"
                  size="large"
                  allowClear
                  placeholder="身份证号/手机号"
                  v-decorator="[
                      'name',
                      {
                        rules: [
                          {
                            required: true,
                            message: '身份证号/手机号',
                            whitespace: true,
                          },
                        ],
                      },
                    ]">
                    <a-icon slot="prefix" type="user" />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input-password
                  size="large"
                  placeholder="请输入密码"
                  autocomplete="autocomplete"
                  type="password"
                  v-decorator="[
                      'password',
                      {
                        rules: [
                          {
                            required: true,
                            message: '请输入密码',
                            whitespace: true,
                          },
                        ],
                      },
                    ]">
                    <a-icon slot="prefix" type="lock" />
                  </a-input-password>
                </a-form-item>
                <a-form-item>
                  <div style="display: flex">
                    <a-input
                    autocomplete="autocomplete"
                    allowClear
                    size="large"
                    placeholder="请输入验证码"
                    v-decorator="[
                        'captcha',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请输入验证码',
                              whitespace: true,
                            },
                          ],
                        },
                      ]">
                    </a-input>
                    <img style="cursor: pointer" @click="init()" :src="imgNumber" />
                  </div>
                </a-form-item>

              </a-tab-pane>
              <a-tab-pane tab="手机号登录" key="2" v-if="false">
                <a-form-item>
                  <a-input size="large" allowClear placeholder="请输入手机号码">
                    <a-icon slot="prefix" type="mobile" />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-row :gutter="8" style="margin: 0 -4px">
                    <a-col :span="16">
                      <a-input size="large" allowClear placeholder="请输入验证码">
                        <a-icon slot="prefix" type="mail" />
                      </a-input>
                    </a-col>
                    <a-col :span="8" style="padding-left: 4px">
                      <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
                    </a-col>
                  </a-row>
                </a-form-item>
              </a-tab-pane>
            </a-tabs>
                <div class="login-main-wh">
                  <a-checkbox v-model="autoLogin">记住密码</a-checkbox>
                  <a style="float: right" @click="forgetPsw">忘记密码</a>
                </div>
                <a-form-item class="login-main-wh">
                  <a-button :loading="logging" class="login-button" size="large" htmlType="submit" type="primary">登录</a-button>
                </a-form-item>
                <div class="login-main-wh">
                  其他登录方式
                  <a v-for="(item, index) in imgIcon" :key="index" style="padding-left: 15px">
                    <img class="icon" :title="item.providerName" :src="`img/${item.icon}`" @click="skipThirdLogin(index)" />
                  </a>
                  <router-link style="float: right" to="/home" v-show="false">注册账户</router-link>
                </div>
          </a-form>
        </div>
      </el-main>
      <!-- 底部内容 -->
      <el-footer class="footer-cmedu">
        <span>Copyright 上海市崇明区教育局 2023<a @click="goUrl">https://home.cmjy.sh.cn</a></span>
      </el-footer>
    </el-container>
    <!-- 忘记密码弹出层 -->
    <a-modal v-model="visible" title="忘记密码" :footer="null">
      <a-steps :current="current">
        <a-step>
          <!-- <span slot="title">Finished</span> -->
          <template slot="title"> 手机号验证 </template>
        </a-step>
        <a-step title="填写新密码" />
      </a-steps>
      <a-form-model :layout="layout" v-bind="formItemLayout" :model="ruleForm" :rules="rules" ref="ruleForm" v-show="current == 1">
        <a-form-model-item label="手机号" prop="phone">
          <a-input v-model="ruleForm.phone" allowClear placeholder="请输入手机号"></a-input>
        </a-form-model-item>
        <!-- <a-form-model-item label="图片验证码" prop="captcha">
          <div style="display: flex">
            <a-input
              autocomplete="autocomplete"
              allowClear
              v-model="ruleForm.captcha"
              placeholder="请输入右侧图形中的验证码"
              v-decorator="[
                'captcha',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入右侧图形中的验证码',
                      whitespace: true,
                    },
                  ],
                },
              ]">
            </a-input>
            <img class="captcha-ys" @click="init2()" :src="imgNumber2" />
          </div>
        </a-form-model-item> -->
        <a-form-model-item label="图片验证码" prop="captcha">
          <a-row :gutter="6" class="margin-l">
            <a-col :span="14">
              <a-input
              autocomplete="autocomplete"
              allowClear
              v-model="ruleForm.captcha"
              placeholder="请输入右侧图形中的验证码"
              v-decorator="[
                'captcha',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入右侧图形中的验证码',
                      whitespace: true,
                    },
                  ],
                },
              ]">
            </a-input>
            </a-col>
            <a-col :span="10">
              <img class="captcha-ys" @click="init2()" :src="imgNumber2" />
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item label="短信验证码" prop="code">
          <a-row :gutter="6" class="margin-l">
            <a-col :span="14">
              <a-input
                v-model="ruleForm.code"
                allowClear
                placeholder="请输入手机短信验证码">
              </a-input>
            </a-col>
            <a-col :span="10">
              <a-button
                class="captcha-button"
                :disabled="isShow"
                @click="getMessage()">{{ messageInfo }}</a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="buttonItemLayout.wrapperCol">
          <a-button type="primary" @click="next"> 下一步 </a-button>
        </a-form-model-item>
      </a-form-model>
      <a-form-model
        :layout="layout"
        v-bind="formItemLayout"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        v-show="current == 2">
        <a-form-model-item label="新密码" prop="password">
          <a-input
            v-model="ruleForm.password"
            allowClear
            placeholder="请输入新密码"
            type="password"></a-input>
        </a-form-model-item>
        <a-form-model-item label="确认新密码" prop="newpassword">
          <a-input
          class="margin-l"
          v-model="ruleForm.newpassword"
          allowClear
          placeholder="请再次输入密码"
          type="password"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="buttonItemLayout.wrapperCol">
          <a-button type="primary" @click="onSubmit3"> 提交 </a-button>
          <a-button v-if="current > 0" @click="prev" style="margin: 0 6px">上一步</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getRoutesConfig } from "@/services/user"
import { setAuthorization } from "@/utils/request";
import { loadRoutes } from "@/utils/routerUtil";
import { mapMutations } from "vuex";
import httplogin from "../../api/login";
import application from "@/api/application";
// import options from '../../router/config'

import CryptoJS from "crypto-js";
export default {
  name: "Login",
  data() {
    return {
      timer: null,
      logging: false,
      autoLogin: true,
      visible: false,
      current: 1,
      vcode: "",
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      ruleForm: {
        phone: "",
        password: "",
        code: "",
        captcha: "",
        newpassword: "",
      },

      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },

          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,

            message: "请输入正确格式的手机号",

            trigger: "blur",
          },
        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

        code: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
      },

      messageInfo: "获取验证码",
      isShow: false,
      error: "",
      form: this.$form.createForm(this),
      state: null,
      imgNumber: null,
      imgNumber2: null,
      forgetState: "",
      imgIcon: [],
      appInfo: [],
      layout: "horizontal",
      status: 0,
    };
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
    formItemLayout() {
      return this.layout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      return this.layout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
  mounted() {
    const url = window.location.href;
    if (url.indexOf("redirect_uri") > 0) {
      var redirect_uri = this.getUrlParams2(url).redirect_uri;
    }

    if (redirect_uri) {
      var s = CryptoJS.enc.Base64url.parse(redirect_uri).toString(
        CryptoJS.enc.Utf8
      );
      localStorage.setItem("redirect_uri", s);
    }

    this.init();
    this.initThirdLogin();
    //账号密码默认值
    this.form.setFieldsValue({
      name: "",
      password: "",
      captcha: "",
    });
  },
  methods: {
    forgetPsw() {
      this.visible = true;
      this.init2();
    },
    validateBtn() {
      //倒计时
      let that = this;
      let time = 90;

      //默认样式，防止快速点击好几次

      this.messageInfo = time + "秒后重试";

      that.timer = setInterval(() => {
        if (time == 0) {
          clearInterval(that.timer);

          that.messageInfo = "获取验证码";

          that.isShow = false;
        } else {
          that.messageInfo = time + "秒后重试";

          that.isShow = true;

          time--;
        }
      }, 1000);
    },

    getMessage() {
      //忘记密码获取手机验证码回调
      if (this.ruleForm.phone == "") {
        this.$message.error("手机号不能为空", 3);
      } else {
        if (this.ruleForm.captcha == "") {
          this.$message.error("验证码不能为空", 3);
          return;
        }

        var param = {
          mobile: this.ruleForm.phone,
          state: this.forgetState,
          captcha: this.ruleForm.captcha,
        };

        httplogin.getMessaageCode(param).then((res) => {
          if (res.data.code == 0) {
            this.vcode = res.data.data;
            this.validateBtn();
          } else if (res.data.code == 2) {
            this.$message.error("验证码错误");
            this.messageInfo = "获取验证码";
            this.isShow = false;
            clearInterval(this.timer);
            this.init2();
          }
        });
      }
    },
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
    onSubmit3() {
      if (this.ruleForm.password == "" || this.ruleForm.newpassword == "") {
        this.$message.error("密码不能为空", 3);
      }
      if (this.ruleForm.password != this.ruleForm.newpassword) {
        this.$message.error("两次密码输入不一致", 3);
        return;
      }
      let data = {
        password: this.ruleForm.password,
        confirmPassword: this.ruleForm.newpassword,
        state: this.forgetState,
        otpCaptcha: this.ruleForm.code,
        userId: this.vcode.userId,
        username: this.vcode.username,
      };
      httplogin.updatePassword(data).then((res) => {
        if (res.data.code == 0) {
          this.$message.success("密码修改成功", 3);
        }
        this.visible = false;
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    getUrlParams2(url) {
      if (url.indexOf("?") > 0) {
        let urlStr = url.split("?")[1];
        const urlSearchParams = new URLSearchParams(urlStr);
        const result = Object.fromEntries(urlSearchParams.entries());
        return result;
      }
    },
    goUrl() {
      window.open("https://home.cmjy.sh.cn");
    },
    skipThirdLogin(val) {
      let provider = this.appInfo[val].provider;
      httplogin.goThirdLogin(provider).then((res) => {
        if (res.data.code == 0) {
          // this.$router.push({ path: "/callback/" + provider })
          window.location.href = res.data.data;
        }
      });
    },
    initThirdLogin() {
      httplogin.thirdLogin(true, "").then((res) => {
        if (res.status == 200) {
          this.imgIcon = res.data.data.socials.providers;
          this.appInfo = res.data.data.socials.providers;
        }
      });
    },
    ...mapMutations("account", ["setUser", "setPermissions", "setRoles"]),
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true;
          const username = this.form.getFieldValue("name");
          const password = this.form.getFieldValue("password");
          this.captcha = this.form.getFieldValue("captcha");
          const data = {
            username,
            password,
            captcha: this.captcha,
            state: this.state,
            authType: "normal",
          };
          httplogin
            .login_signin(data)
            .then((res) => {
              if (res.data.code == 0) {
                const {
                  displayName,
                  email,
                  id,
                  name,
                  expired,
                  refresh_token,
                  token,
                  ticket,
                  username,
                  type,
                } = res.data.data;
                //保存token 以及token失效时间
                let now = new Date(new Date(new Date().getTime() + 30 * 60 * 1000));
                //设置时间
                // now.setMinutes(now.getMinutes() + expired / 10);
                setAuthorization({
                  token: token,
                  expireAt: now,
                  online_ticket: ticket,
                  congress: refresh_token,
                });
                // const op = require('../../router/config').default
                this.setUser(displayName);
                this.setPermissions(displayName);
                this.setRoles(type);
                localStorage.setItem("loginuserId", id);
                this.isBInddingding();

                // console.log(options.routes)
                // loadRoutes(op.routes)

                // console.log(this.$router.options.routes)

                // 获取路由配置
              } else if (res.data.code == 2) {
                this.$message.error(
                  res.data.message ? res.data.message : "验证码失效",
                  3
                );
                this.logging = false;
                this.init();
              }
            })
            .catch((err) => {
              this.$message.error("用户名或密码错误");
              this.logging = false;
              this.init();
            });
        }
      });
    },
    async formatDataRoute() {
      // let routerArr = [];
      // let obj = {
      //   children: [],
      //   router: "root",
      // };
      // const res = await httplogin.getMenuTree();
      // for (let index = 0; index < res.data.length; index++) {
      //   if (this.status == 0 && res.data[index].id == 113) {
      //     res.data.splice(index, 1);
      //     break;
      //   }
      // }


      // obj.children = res.data;
      // routerArr.push(obj);
      // await loadRoutes(routerArr);
      await this.$router.push("/loading").catch(() => {});
    },
    async isBInddingding() {
      // let id = localStorage.getItem("loginuserId");
      // let param =
      //   "%7Bcreate_user_id%3A" + id + "%2Cfk_adhibition_id%3Adingding%7D";
      // let res = await application.getLists(param);
      // if (res.data.errcode == 0 && res.data.rows.length > 0) {
      //   this.status = 1;
      // }
      this.formatDataRoute();
    },
    //刷新验证码
    init2() {
      httplogin
        .getInitKey()
        .then((result) => {
          const { state } = result.data.data;
          if (result.status == 200) {
            this.state = state;
            const data = {
              state,
            };
            httplogin
              .getNumber(data)
              .then((res) => {
                const { image, state } = res.data.data;
                if (res.status == 200) {
                  this.imgNumber2 = image;
                  this.forgetState = state;
                } else {
                  this.imgNumber2 = null;
                }
              })
              .catch((err) => {
                console.error(err);
              });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //刷新验证码
    init() {
      httplogin
        .getInitKey()
        .then((result) => {
          const { state } = result.data.data;
          if (result.status == 200) {
            this.state = state;
            const data = {
              state,
            };
            httplogin
              .getNumber(data)
              .then((res) => {
                const { image } = res.data.data;
                if (res.status == 200) {
                  this.imgNumber = image;
                } else {
                  this.imgNumber = null;
                }
              })
              .catch((err) => {
                console.error(err);
              });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 20230526 ytj edit
.mianlay {
    height: 100vh;
   // background: #fff url(../../assets/img/loginImg.png) no-repeat 0 0;
    background-attachment:fixed;
    background-position: -50px 70%;
    background-origin: content-box;
    box-sizing: border-box;
  }

  // .login-top {
  //   img {
  //     display: inline-block;
  //     width: 52px;
  //     margin-right: 12px;
  //   }
  //   h2 {
  //     margin-top: 8px;
  //     font-size: 1.6em;
  //   }
  // }

  .login-top {
    height: 64px !important;
    padding-top: 20px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      margin-right: 16px;
      width:48px;
      height: 48px;
      vertical-align: top;
    }
    h2 {
      display: inline-block;
      margin-top: 10px;
      font-size: 1.6em;
      letter-spacing: 2px;
      vertical-align: middle;
    }
  }



  .login-button {
    width: 100%;
    margin-top: 24px;
  }
.footer-cmedu {
  width: 100%;
  height: 36px !important;
  line-height: 36px;
  position: absolute;
  bottom: 0;
  text-align: center;
}
.formcenter {
    position: absolute;
    top: 24%;
    right: 5%;
  }


@media (max-width:3440px) {
  .mianlay {
    background-size: 1870px 1052px;
    background-attachment:fixed;
    background-position: 10% 70%;
  }
  .login-top {
    height: 120px !important;
    padding-top: 20px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      margin-right: 16px;
      width:80px;
      height: 80px;
      vertical-align: top;
    }
    h2 {
      display: inline-block;
      margin-top: 10px;
      font-size: 3.2em;
      letter-spacing: 2px;
      vertical-align: middle;
    }
  }
  .formcenter {
    width: 600px;
    position: absolute;
    top: 34%;
    right: 16%;
  }
  .footer-cmedu {
    font-size: 1.4em;
    height: 48px;
    line-height: 20px;
  }
 }
@media (max-width:1920px) {
  .mianlay {
    background-size: 1360px 765px;
    background-attachment:fixed;
    background-position: -50px 70%;
  }

  .login-top {
    height: 82px !important;
    padding-top: 8px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      margin-right: 16px;
      width:64px;
      height: 64px;
      vertical-align: top;
    }
    h2 {
      display: inline-block;
      margin-top: 12px;
      font-size: 28px;
      letter-spacing: 2px;
      vertical-align: middle;
    }
  }
  .formcenter {
  position: absolute;
  top: 24%;
  right: 7%;
}


}
@media (max-width:1680px) {
  .mianlay {
    background-size: 986px 554px;
    background-attachment:fixed;
    background-position: -50px 70%;
  }
  .login-top {
    padding-top: 6px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      margin-right: 16px;
      margin-top: 14px;
      width: 46px;
      height: 46px;
      vertical-align: top;
    }
    h2 {
      display: inline-block;
      margin-top: 16px;
      vertical-align: middle;
    }
  }
  .formcenter {
  position: absolute;
  top: 24%;
  right: 2%;
}
}
@media (max-width:1366px) {
  .mianlay {
    // padding-bottom: 40px;
    background-size: 727px 409px;
    background-attachment:fixed;
    background-position: -50px 65%;
  }
  .login-top {
    padding-top: 6px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      margin-right: 16px;
      height: 46px;
      vertical-align: top;
    }
    h2 {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .formcenter {
  position: absolute;
  top: 24%;
  right: 2%;
}
.login-main-wh {
    margin-top: -6px;
  }
}

@media (max-width: 1152px) {
  .mianlay {
    // padding-bottom: 40px;
    background-size: 727px 409px;
    background-attachment:fixed;
    background-position: -50px 70%;
  }
  .login-top {
    padding-top: 6px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      margin-right: 16px;
      height: 46px;
      vertical-align: top;
    }
    h2 {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .login-main-wh {
    // width: 520px;
    // padding: 0 12px;
    // box-sizing: border-box;
    margin-top: -6px;
  }
  .formcenter {
  position: absolute;
  top: 28%;
  right: 8%;
}
  .footer-cmedu {
  position: absolute;
  bottom: 0;
  text-align: center;
}
.margin-l {
    margin-left: 12px !important;
  }
}

/* 平板电脑和小屏电脑之间的分辨率 */

@media (max-width: 1024px) {
  .mianlay {
    background-size: 544px 306px;
    background-attachment:fixed;
    background-position: 0 70%;
  }
  .login-top {
    width: 100% !important;
    height: 80px !important;
    padding-top: 15px;
    // line-height: 80px;
    background-color: #f8f8f8;
    img {
      display: inline-block;
      width: 52px;
      // margin-top: -10px;
      margin-right: 12px;
    }
    h2 {
      display: inline-block;
      // margin-top: 8px;
      font-size: 1.6em;
    }
  }
  .formcenter {
    width: 410px;
    position: absolute;
    top: 14%;
    right: 5%;
  }
  .margin-l {
    margin-left: 12px !important;
  }
  .captcha-ys {
    margin-top: -4px;
    cursor: pointer;
    height: 30px;
  }
}

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width:800px) {
  .mianlay {
    background-size: 286px 140px;
    background-attachment:fixed;
    background-position: 1% 82%;
  }
  .login-button {
    margin-top: 8px;
  }
  .login-main-wh {
    // margin-top: -px;
  }
  .footer-cmedu {
    font-size: 8px;
  }
}

@media (max-width: 667px) {
  .mianlay {
    background-size: 286px 140px;
    background-attachment:fixed;
    background-position: 30% 82%;
  }
  .login-top {
    width: 100% !important;
    height: 100px !important;
    background-color: #f8f8f8;
    img {
      display: block;
      width: 48px;
      margin: 10px auto 8px auto;
    }
    h2 {
      font-size: 1.5em;
      text-align: center !important;
    }
  }
  .formcenter {
    width: 90%;
    position: absolute;
    top: 14%;
    left: 5%;
  }
  .login-main-wh {
    width: 84%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .footer-cmedu {
    font-size: 8px;
  }
  .ant-modal-header {
    padding: 12px !important;
  }


}

// .loginImg {
//   margin-top: 10%;
//   margin-left: 4%;
//   width: 80%;
//   // vertical-align: center;
//   // margin: 16px;
// }

// .loginImg img {
//   width: 94%;
// }



// 以下待删



.login-main {
  height: 96%;
}

.a-button.disabled-style {
  background-color: #eeeeee;
  color: #cccccc;
}



@media (min-width: 3440px) {
  // .formcenter {
  //   width: 20%;
  //   top: 29%;
  // }

  .login-main {
    height: 100%;
    overflow: hidden;
  }


}

.ant-form {
  width: 400px;
  align-items: center;
}

.login {
  width: 368px;
  margin: 0 auto;

  @media screen and (max-width: 576px) {
    width: 95%;
  }

  // @media screen and (max-width: 320px) {
  //   .captcha-button {
  //     font-size: 14px;
  //   }
  // }

  .icon {
    font-size: 24px;
    color: @text-color-second;
    margin-left: 16px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: @primary-color;
    }
  }
}



.a-layout-content {
  flex: 1;
  // overflow: auto;
}

.ant-layout {
  background: #fff;
}



a {
  color: #ff4d4f !important;;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}

.ant-layout-header {
  text-shadow: 0 1px 0 #fff;
  box-shadow: 0 0 5px 0 rgb(42 41 40 / 30%);
  border-bottom: 1px solid #e5e5e5;
  background: #f5f7fa;
  min-height: 60px;
  text-shadow: 0 1px 0 #fff;
  box-shadow: 0 0 5px 0 rgb(42 41 40 / 30%) !important;
  display: flex;
  align-items: center;
}

h2 {
  font-weight: 600;
  margin-bottom: 0 !important;
  font-size: calc(36vw * 100 / 1920);
  font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
}



.ant-layout-footer {
  background: #ffffff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 0 5px 0 rgb(42 41 40 / 30%);
  text-shadow: 0 1px 0 #fff;
}

.el-row {
  margin: 0 !important;
}
</style>
